<template>
	<view id="WorkOrderStatus">
		<view class="WorkOrderStatus_check">
			<view class="WorkOrderStatus_check_public" v-for="(item,index) in checkList" @click="()=>check_id=index"
				:class="check_id == index&&'WorkOrderStatus_check_public_check'">
				<text @click="handlerData(item.id)">
					{{item.name}}
					<text>{{item.num}}</text>
				</text>
			</view>
		</view>
		<view class="WorkOrderStatus_input">
			<view class="WorkOrderStatus_input_con" :style="{
						width: selAction?'calc(100% - 10px - 100rpx)':''
					}">
				<uni-icons type="search" size="30" class="WorkOrderStatus_input_con_left"></uni-icons>
				<input type="text" v-model="selCon" @click="()=>selAction = true" @focus="()=>{focusAction=true}"
					@blur="()=>selCon ? focusAction=true : focusAction=false">
				<uni-icons type="closeempty" size="30" class="WorkOrderStatus_input_con_right" :style="{
					display:focusAction?'block':'none'
				}" @click="selCon='';focusAction=false"></uni-icons>
			</view>
			<text @click="()=>selAction = false" :style="{
				display: selAction?'block':'none'
			}">取消</text>
		</view>
		<scroll-view class="WorkOrderStatus_con" scroll-y="true" :show-scrollbar="false">
			<view class="WorkOrderStatus_content">
				<view class="WorkOrderStatus_content_con" v-for="(item,index) in datas" :key="index">
					<view class="_title">
						<view class="_title_left">
							<uni-icons type="settings"></uni-icons>
							<text>{{item.address}}</text>
						</view>
						<view class="_title_right" @click="goto(item._id)">
							<text>详细</text>
							<uni-icons type="right"></uni-icons>
						</view>
					</view>
					<view>设备位置：{{item.address}}</view>
					<view>报单时间：{{item.create_time}}</view>
					<view>报修人：{{item.repair_applicant}}</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		request
	} from '@/unit/request.js'
	import {
		onMounted,
		ref
	} from "vue";
	// check切换内容
	let checkList = ref([])
	let check_id = ref(1) // 切换到那个内容
	// 搜索内容
	const datas = ref([])
	const handlerData = (num = 2) => {
		console.log(num);
		request({
			url: "http://42.192.15.126:3000/yan/data?id=" + num,
			method: 'GET'
		}).then(item => {
			datas.value = item.data
		})
	}
	let selAction = ref(false) // 控制是否在搜索状态
	let focusAction = ref(false) // 控制是否有光标
	let selCon = ref('') // 搜索框的内容
	let goto = (id) => {
		if (check_id.value == 1 || check_id.value == 2) {
			uni.navigateTo({
				url: `/pages/work-order-management/work-order-details/work-order-details?status=${check_id.value}&name=查看工单进度&redirect=/pages/work-order-management/work-order-progress/work-order-progress&_id=${id}`
			})
		} else if (check_id.value == 3) {
			uni.navigateTo({
				url: `/pages/work-order-management/work-order-completed/work-order-completed?_id=${id}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/work-order-management/work-order-details/work-order-details?_id=${id}`
			})
		}
	}
	onMounted(() => {
		handlerData()
		request({
			url: "http://42.192.15.126:3000/yan/type",
			method: 'GET'
		}).then(item => {
			item.data.forEach(items => {
				checkList.value = [...checkList.value, {
					'name': items.name,
					'id': items.id,
					'num': items.children.length
				}]
			})
		})
	})
</script>

<style lang="scss">
	#WorkOrderStatus {
		height: calc(100vh - 44px);
		background-color: #f4f6f9;

		.WorkOrderStatus_check {
			display: flex;
			align-items: center;
			// padding: 15px 0;
			height: 50px;
			background-color: #ffffff;
			box-sizing: border-box;

			.WorkOrderStatus_check_public_check {
				border-bottom: 4px solid #4a73ff !important;
				transition: 1s all;
			}

			.WorkOrderStatus_check_public {
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 25%;
				box-sizing: border-box;
				border-bottom: 4px solid white;

				text {
					color: #b3b4d2;
					position: relative;

					text {
						font-size: 10px;
						background-color: #f95e5a;
						padding: 0 6px;
						border-radius: 10px;
						color: white;
						right: 0;
						transform: translate(100%, -50%);
						position: absolute;
					}
				}
			}
		}

		.WorkOrderStatus_input {
			height: 70rpx;
			padding: 20rpx;
			position: relative;

			>text {
				position: absolute;
				top: 50%;
				right: 10px;
				transform: translateY(-50%);
				font-size: 35rpx;
				color: #007afe;
			}

			.WorkOrderStatus_input_con {
				// width: 100%;
				// width: calc(100% - 10px - 100rpx);
				position: relative;
				height: 100%;
				border-radius: 70rpx;

				input {
					background-color: #eaeaeb;
					height: 100%;
					border-radius: 20rpx;
					padding: 0 80rpx;
				}

				.WorkOrderStatus_input_con_left {
					position: absolute;
					top: 50%;
					left: 10px;
					transform: translateY(-50%);
				}

				.WorkOrderStatus_input_con_right {
					position: absolute;
					top: 50%;
					right: 10px;
					transform: translateY(-50%);
				}
			}
		}

		.WorkOrderStatus_con {
			height: calc(100% - 110rpx - 50px);
			box-sizing: border-box;
			padding: 20rpx 0;

			.WorkOrderStatus_content {
				padding: 0 60rpx;
				height: 100%;
				box-sizing: border-box;
				height: 100%;

				.WorkOrderStatus_content_con:first-child {
					margin-top: 0;
				}

				.WorkOrderStatus_content_con {
					background-color: white;
					height: 300rpx;
					padding: 20rpx;
					box-sizing: border-box;
					border-radius: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					color: #b3b4d2;
					margin-top: 40rpx;



					._title {
						display: flex;
						align-items: flex-end;
						justify-content: space-between;

						._title_left {
							display: flex;
							align-items: flex-end;

							text:first-child {
								width: 60rpx;
								height: 60rpx;
								font-size: 60rpx !important;
								margin-right: 10rpx;
								background-color: #007afe;
								color: white !important;
								border-radius: 5rpx;
								box-shadow: 5px 5px 5px #eaeaeb;
							}
						}

						._title_right {
							font-size: 30rpx;

							text:last-child {
								font-size: 30rpx !important;
								color: #b3b4d2 !important;
							}
						}
					}
				}
			}
		}
	}
</style>
